<template>
  <TopNav title="财务报表"/>
  <div class="financial-report-page">
    <!-- 报表头部 -->
    <div class="report-header">
      <el-date-picker
          v-model="dateRange"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          style="width: 200px"
      />
      <el-button type="primary" @click="filterData">筛选</el-button>
    </div>

    <!-- 报表主体 -->
    <div class="report-body">
      <!-- 数据表格 -->
      <el-table
          :data="filteredTableData"
          style="width: 100%"
          :default-sort="{ prop: 'amount', order: 'descending' }"
      >
        <el-table-column prop="category" label="类别" width="150" />
        <el-table-column prop="amount" label="金额" width="100">
          <template #default="{ row }">{{ row.amount | currency }}</template>
        </el-table-column>
        <el-table-column prop="proportion" label="占比">
          <template #default="{ row }">{{ row.proportion | percentage }}</template>
        </el-table-column>
      </el-table>

      <!-- 图表 -->
      <div id="chart-container" style="width: 100%; height: 400px;"></div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, computed } from 'vue';
import * as echarts from 'echarts';
import TopNav from "@/components/TopNav/Back.vue"
// 模拟财务数据
const tableData = ref([
  { category: '营业收入', amount: 10000 },
  { category: '营业成本', amount: 6000 },
  { category: '管理费用', amount: 1000 },
  { category: '销售费用', amount: 800 },
  { category: '财务费用', amount: 500 },
]);

// 日期范围选择
const dateRange = ref([]);

// 筛选后的数据
const filteredTableData = ref(tableData.value);

// 计算数据占比
const calculateProportion = () => {
  const total = tableData.value.reduce((sum, item) => sum + item.amount, 0);
  tableData.value.forEach((item) => {
    item.proportion = (item.amount / total).toFixed(2);
  });
};

// 货币格式化过滤器
const currency = (value) => {
  return `￥${value}`;
};

// 百分比格式化过滤器
const percentage = (value) => {
  return `${(value * 100).toFixed(2)}%`;
};

// 数据筛选方法
const filterData = () => {
  if (dateRange.value.length === 2) {
    const startDate = format(dateRange.value[0], 'yyyy-MM-dd');
    const endDate = format(dateRange.value[1], 'yyyy-MM-dd');
    // 这里可以根据实际需求，按照日期范围筛选数据，此处仅为示例，暂未实现真实筛选逻辑
    filteredTableData.value = tableData.value;
  } else {
    filteredTableData.value = tableData.value;
  }
};

// 页面加载时计算占比
onMounted(() => {
  calculateProportion();
  // 初始化图表
  const chartDom = document.getElementById('chart-container');
  const myChart = echarts.init(chartDom);
  const xAxisData = tableData.value.map((item) => item.category);
  const yAxisData = tableData.value.map((item) => item.amount);

  const option = {
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow',
      },
    },
    xAxis: {
      type: 'category',
      data: xAxisData,
    },
    yAxis: {
      type: 'value',
    },
    series: [
      {
        name: '金额',
        type: 'bar',
        data: yAxisData,
        itemStyle: {
          color: '#409EFF',
        },
      },
    ],
    dataZoom: [
      {
        type: 'inside',
      },
      {
        type: 'slider',
      },
    ],
  };

  myChart.setOption(option);
});
</script>

<style scoped>
.financial-report-page {
  padding: 20px;
  background-color: #f5f7fa;
  border-radius: 10px;
}
.report-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}
.report-title {
  color: #303133;
  font-size: 24px;
}
.el-table {
  margin-bottom: 20px;
  background-color: #fff;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}
.el-table th {
  background-color: #f0f2f5;
  color: #606266;
}
.el-table td {
  color: #303133;
}
#chart-container {
  background-color: #fff;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}
</style>
